<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link rel="stylesheet" href="__PLUG__/bootstrap/css/bootstrap.min.css?v={:config('asset_version')}">
<title>MAP</title>

<style>
#map {
  height: 100%;
}

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#address .poi-name{color:red}
.input-group{
	position:absolute;
	z-index:9999;
	width:100%;
	padding:15px;
}
.input-txt{
	width:80%;
	height:18px;
	line-height:28px;
	padding:5px;
	border:1px #dbdbdb solid;
	border-radius:5px;
	margin:0;
	float:left;
}
.input-btn{
	display:inline-block;
	width:80px;
	text-align:center;
	line-height:28px;
	height:28px;
	background:#fff;
	border:1px #dbdbdb solid;
	border-radius:5px;
	float:left;
	margin-left:5px;
	cursor:pointer
}
</style>

</head>
<body>
<div class="content">
        <div class="col-md-12">	
            <div class="nav-tabs-custom">
                <div class="box-body">
                    <div class="row" >
                        <div class="col-xs-4" >
                            <select id="topid" size="10"  class="form-control" >				
                                {volist name="address" id="item"}
                                    <option value="{$item.id}" data-lng="{$item.lng}" data-lat="{$item.lnt}">{$item.name}</option>
                                
                                {/volist}
                            </select>
                        </div>
                        <div class="col-xs-4" >
                            <select id="sonid" size="10"  class="form-control" >				
                            
                            </select>
                        </div>
                        <div class="col-xs-4" >
                            <select id="sunid" size="10"  class="form-control" >				
                            
                            </select>
                        </div>
                    </div>				
                    <div style="margin-top:15px;" id="result"  ></div>
                    <div style="margin-top:15px;display:none" id="result_btn"  >				
                       <a  class="btn btn-info">确定选择</a>                
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__PLUG__/jquery/jquery.min.js?v={:config('asset_version')}"></script>
<script type='text/javascript'>
var callback = '{$Request.param.callback}';

	$(document).on("click","#topid",function(){		
	      var id = $(this).find("option:checked").val()
		  if(!id){
			return
		  }
		  $("#sonid").html("")
		  $("#sunid").html("")
		  $.get("{:url('address',['level'=>2])}",{pid:id},function(result){		  
				$.each(result.data,function(i,e){					
					$("#sonid").append($('<option value="'+e.id+'" data-lng="'+e.lng+'" data-lat="'+e.lat+'">'+e.name+'</option>'))
				})
		  })	
	})
	$(document).on("click","#sonid",function(){		
	      var id = $(this).find("option:checked").val()	
		  if(!id){
			return
		  }
		  $("#sunid").html("")
		  $.get("{:url('address',['level'=>3])}",{pid:id},function(result){		  
				$.each(result.data,function(i,e){					
					$("#sunid").append($('<option value="'+e.id+'" data-lng="'+e.lng+'" data-lat="'+e.lat+'">'+e.name+'</option>'))
				})
		  })	
	})
    var result = {};
	$(document).on("click","#sunid",function(){		

		var province = $("#topid").find("option:checked");
		var city = $("#sonid").find("option:checked");
		var district = $("#sunid").find("option:checked");
		if(!district.val()){
			return
		}
        result = {
            province : province.text(),
            province_id : province.val(),
            city : city.text(),
            city_id : city.val(),
            district : district.text(),
            district_id : district.val(),
            lng : district.data("lng"),
            lat : district.data("lat"),
        };
        console.log("success",result);
		
		$("#result").html(result.province + ',' + result.city + ',' + result.district)
		$("#result_btn").show();
	})
    $("#result_btn a").click(function(){    
        window.close();
        var index = parent.layer.getFrameIndex(window.name);  
        parent.layer.close(index);//关闭当前页
        parent.window[callback](result);    
    })
   

</script>


</body>
</html>